import * as React from 'react';
import {observer} from 'mobx-react'
import styles from './index.scss';
import {Carousel} from 'antd';
import {IHotOrderType} from "../../../../type/firstType";
import ModalText from "../../../../components/ModalText";


interface IProps {
    borderBottom: string
    borderTop: string
    hotList: IHotOrderType[]
}

@observer
class Home extends React.Component<IProps> {

    constructor(props) {
        super(props);
    }


    public render() {
        const {borderBottom, borderTop, hotList} = this.props
        return (
            <div className={styles.swiper} style={{borderBottom: borderBottom}}>
                <div className={styles.title} style={{borderTop: borderTop}}>
                    <span className={styles.spanWidth} title="工单号"><ModalText text='工单号' long={10} /></span>
                    <span className={styles.spanWidth} title="设备序列号"><ModalText text='设备序列号' long={10} /></span>
                    <span className={styles.spanWidth} title="医院名称"><ModalText text='医院名称' long={10} /></span>
                    <span className={styles.spanWidth} title="工程师"><ModalText text='工程师' long={10} /></span>
                    <span className={styles.spanWidth} title="天数"><ModalText text='天数' long={10} /></span>
                    <span className={styles.spanWidth} title="故障描述"><ModalText text='故障描述' long={10} /></span>
                </div>
                <div className={styles.swiperC}>
                    {
                        hotList.length > 0 &&
                        <Carousel autoplay={true} dots={false} vertical={true} slidesToShow={6} autoplaySpeed={2000}>
                            {
                                hotList.length > 0 &&
                                hotList.map((item, index) => {
                                    return (
                                        <div className={index % 2 === 0 ? styles.list1 : styles.list}
                                             key={`itemLFTB_${index}`}>
                                            <span className={styles.spanWidth} title={item.WorkOrderNumber}><ModalText text={item.WorkOrderNumber}
                                                                                          long={10} /></span>
                                            <span className={styles.spanWidth} title={item.SerialLotNumber}><ModalText text={item.SerialLotNumber}
                                                                                          long={10} /></span>
                                            <span className={styles.spanWidth} title={item.Location}><ModalText text={item.Location}
                                                                                          long={10} /></span>
                                            <span className={styles.spanWidth} title={item.Technician}><ModalText text={item.Technician}
                                                                                          long={10} /></span>
                                            <span className={styles.spanWidth} title={item.Age}><ModalText text={item.Age}
                                                                                          long={10} /></span>
                                            <span className={styles.spanWidth} title={item.InitialReportEnglish}><ModalText
                                                text={item.InitialReportEnglish} long={32} /></span>
                                        </div>
                                    )
                                })
                            }
                        </Carousel>
                    }
                </div>
            </div>
        );
    }
}

export default Home;
